<template>
	<div>
		<div class="h-three">
			
			<div class="xia">
				<div>集锦</div>
				<div>最佳</div>
				<div>花絮</div>
				<div>关注</div>
			</div>

		</div>
		<div class="sect">
			<video width="100%" height="5.625rem">
				
			</video>
		</div>
		<div class="text">
			<div class="div">视频-2017年季后赛你想看的画面都在...</div>
			<div class="zi"><span>昨天 10:26</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>&nbsp;<font>360</font>&nbsp;&nbsp;<font>8</font></span></div>
		</div>
		<div class="width"></div>
		<div class="video">
			
		</div>
		<div class="width"></div>
		<div class="video1">
			
		</div>
		
	</div>
</template>

<script>
</script>

<style>
	.h-three {
				width: 100%;
				height: 2.765625rem;
				background-color: #002F50;
				
			}
			.shang{
				
				height: 1.375rem;
				display: flex;
				align-items: center;
				
			}
			.shang .zuo{
				height: 1.09375rem;
				float: left;
				
			}
			.shang .you{
				height: 1.09375rem;	
				float: right;
			}
			
			.shang span{
				font-size: 0.46875rem;
				color: #fff;
				flex-grow: 1;
				justify-content: space-around;
				text-align: center;
			}
			.xia{
				height: 1.390625rem;
				display: flex;
				align-items: center;
			}
			.xia div{
				font-size: 0.40625rem;
				color: #7f97a7;
				text-align: center;
				flex-grow: 1;
			}
			.sect{
				height: 5.625rem;
				
				background-size: 100%;
				/*background-color: rosybrown;*/
			}
			.text {
				border-bottom: solid 1px gray;
			}
			.text .div{
				height: 1.25rem;
				line-height: 1.25rem;
				text-align: center;
				font-size: 0.4375rem;
				
			}
			.zi{
				display: flex;
			}
			.text span{
				font-size: 0.34375rem;
				color: #718492;
				text-align: center;
				flex-grow: 1;
			}
			.width{
				height: 0.484375rem;
				background-color: #f6f6f6;
			}
			.video{
				height: 5.625rem;
				
				background-size: 100%;
			}
			.video1{
				height: 5.625rem;
			
				background-size: 100%;
			}
</style>